<div class="control-group form-horizontal" style="margin: 0 0 0 0;">
    <div class="row row-hover recommend-element" style="margin-left: -20px;">
        <div class="span4">
            <label class="control-label-small" name='class-name'>name</label>
            <p class="controls-text-small"><%= name %></p>
        </div>
        <div class="span1-compact" style="display: none;padding-top: 5px">
            <span class="add-on remove-input" ><i class="icon-edit"></i></span>
        </div>
        <div class="recommend-spot" style="text-align:right;padding-right: 20px">
            <div class="round" data-toggle="tooltip" title="Item Recommending">●</div>
        </div>
    </div>
    <div class="control-sub" style="display:none;">
        <label class="control-label-small" name='class-name'>name</label>
        <div class="controls-small icd-element-input" >
            <input type="text" class="span3 search-className"  style="background-color: #f7f7f7"  data-provide="typeahead" data-items="10" autocomplete="off">
            <div class="btn-group">
                <a href="javascript:;" class="btn btn-primary icd-element-input-class-submit">Confirm</a>
                <a href="javascript:;" class="btn icd-element-input-cancel">Cancel</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $(".search-className").typeahead({
            source:function(query, process){
                process(getTypeaHead('className'));
            },
            menu: '<ul style="min-width:220px" class="typeahead dropdown-menu"></ul>',
            item: '<li style="min-width:220px"><a href="#"></a></li>'
        });
    });
</script>

